<template>
  <div class="news-detail">
    <component :is="componentName"></component>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
export default {
  components: {
  },
  
  
  setup() {
    const route = useRoute()
    const router = useRouter()
    const componentName = ref('')
    router.isReady().then(() => {
        componentName.value = `detail${route.params.id}`
    })
    return {
      componentName
    }
  }
}

</script>
<style lang="scss" scoped>
.news-detail {
  margin: 0 auto;
  padding-top: 62px;
  width: 1075px;
    .banner {
        width: 100%;
        height: 306px;
        text-align: center;
        background: url('@/assets/images/navbar_bg.png') no-repeat;
        h1 {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 600;
            font-size: 50px;
            color: white;
        }
    }
    .title {
        height: 100px;
        border: 100% 0 ;
        border-color: black;
        text-align: center;
    }
}
</style>